<template>
    <div class="body">
        <div class='head'>
            <div class="left">
				<div class="logo"><img src="@/assets/images/logo.png" alt=""></div>
				<el-menu
					:default-active="activeIndex"
					class="el-menu"
					mode="horizontal"
					@select="handleSelect"
					background-color="#fff"
					text-color="#333"
					active-text-color="#409EFF">
					<!-- <el-menu-item class="li" index="1"><router-link to="/home" class="link">首页</router-link></el-menu-item>
					<el-menu-item class="li" index="2"><router-link to="/login" class="link">登录</router-link></el-menu-item>
					<el-menu-item class="li" index="3"><router-link to="/register" class="link">注册</router-link></el-menu-item>
					<el-menu-item class="li" index="4"><a href="https://github.com/fhtwl/cloud-sharing" target="_blank" class="link">联系我们</a></el-menu-item> -->
					<el-menu-item v-for="(item,index) in data" :key="index" class="li" :index="(index - (-1)).toString()">
						<router-link v-if="item.to" :to="item.to" class="link">{{ item.text }}</router-link>
						<a v-else :href="item.href" target="_blank" class="link">{{ item.text }}</a>
					</el-menu-item>
				</el-menu>
			</div>
			<div class="right">
				<el-input
					placeholder="请输入文字/标签/用户"
					v-model="keyword"
					class="search">
					<i slot="suffix" class="el-input__icon el-icon-search search-btn" @click="search"></i>
				</el-input>
<!--				<el-button type="primary" @click="goBlog" class='login-btn'>写文章</el-button>-->
				<el-dropdown class='login-btn' @command="select" size="small" split-button type="primary">
					<span @click="goBlog">写文章</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="blog">写文章</el-dropdown-item>
						<el-dropdown-item command="draftList">草稿箱</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<div class='flex-row head-right'>
					<div class="notice">
						<span class="iconfont icon-tishi"></span>
						<el-badge :value="200" :max="99" class="badge"></el-badge>
					</div>
					<div class="avatar">
						<el-dropdown @command="userClick">
							<router-link to="/user"><img class="img" :src="img ? img : '/img/touxiang.00ced54a.png'" alt=""></router-link>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-for="item in userTab" :key="item.command" :command="item.command">{{ item.label }}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
			</div>
        </div>
       <!-- <div class="pages">
            <div class="page-item">

            </div>
        </div> -->
    </div>
</template>

<script>
	import token from '@/utils/token.js';
	import logout from '@/api/user/logout.js';
	import config from '@/config/config-head-user.js'
	import configNav from '@/config/config-head-nav.js'
	import getUserInfo from '@/api/user/getUserInfo.js'
	import {
		mapState
	} from 'vuex'
	export default {
		name:'Head',
		computed: mapState(['isLogin','userInfo']),
		created() {
			if(!this.isLogin) {
				this.getUserInfo()
			}
			// this.getUserInfo()
		},
		data() {
			let _token = token.get()
			return {
				activeIndex: '0',
				data: _token && _token.token ? configNav.loginData : configNav.notLoginData,
				keyword: '',
				userTab: this.isLogin ? config.loginData : config.notLoginData,
				img:''
			};
		},
		watch:{
			isLogin(val) {
				console.log(val)
				this.data = val ? configNav.loginData : configNav.notLoginData
				this.userTab = val ? config.loginData : config.notLoginData
				if(val && !this.userInfo.userName) {
					this.getUserInfo()
				}
				
			}
		},
		methods: {
			async getUserInfo() {
				const res = await getUserInfo()
				console.log(this.$store.state.isLogin)
				if(res.success) {
					this.$store.commit('setLogin',true)
					this.$store.commit('setUserInfo',res.data)
					this.img = res.data.img
					console.log(this.img )
				}
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			goBlog() {
				if(this.isLogin) {
					this.$router.push({path:'/blog'})
				}
				else {
					this.$message('请先登录')
				}
			},
			search() {
				console.log(this.keyword)
			},
			logout() {
				this.$confirm('是否退出登录?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let res = await logout();
					if (res.success){
					this.$message({
						type: 'success',
						message: '退出成功!'
					});
				}else {
						this.$message({
							type: 'warning',
							message: '您暂未登录!'
						});
					}
					localStorage.setItem("CLOUD_SHARE_TOKEN", "");
					location.reload()
					this.$router.go('/home')
				}).catch(() => {

				});
			},
			login() {
				this.$router.push({path:'/login'})
			},
			register() {
				this.$router.push({path:'/register'})
			},
			userClick(tab) {
				switch(tab) {
					case 'logout':
						this.logout()
						break;
					default:
						this.$router.push({path:`/${tab}`})
				}

			},
			select(v) {
				if(v == 'blog') {
					this.$router.push({path:`/${v}`})
				}
				else {
					this.$router.push({path:`/${v}`})
				}
			}
		}
  }
</script>
<style scoped lang="scss">
    .body {
		width:100%;
		background:#fff;
		position: fixed;
		// position: sticky;
		box-shadow: 0rem 2rem 12rem 6rem rgba(3,5,27,0.06);
		top:0;
		z-index: 80;
        .head {
			margin: auto;
			display: flex;
			width: 1200rem;
			max-width: 100%;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
            .left {
				display: flex;
				align-items: center;
				.logo {
					width:113rem;
					height:43rem;
					background:#aaa;
					img {
						width:100%;
						height:100%;
						/*display: none;*/
					}
				}
				.el-menu {
					margin-left:60rem;
					border-color: transparent;
					.li {
						padding:0;

					}
					.link {
						display: flex;
						width: 100%;
						height: 100%;
						padding: 0 20rem;
					}
				}
			}
			.right {
				display: flex;
				align-items: center;
				.head-right {
					align-items: center;
				}
				.avatar {
					width: 30rem;
					height: 30rem;
					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.notice {
					position: relative;
					margin-right: 4rem;
					.iconfont {
						font-size: 34rem;
					}
					.badge {
						position: relative;
						top: -10rem;
						left: -8rem;
					}
				}
				.login-btn {
					background: #098cc8;
					-webkit-box-shadow: 0rem 6rem 8rem 0rem rgba(42, 83, 236, 0.38);
					box-shadow: 0rem 6rem 8rem 0rem rgba(42, 83, 236, 0.38);
					border-radius: 4rem;
					margin-right: 16rem;
				}
				.search {
					width: 200rem;
					margin-right: 22rem;
					.search-btn {
						color: $color;
						cursor: pointer;
					}

				}
			}
        }


	}
	@media screen and (max-width: 750px) {

        .body {
			padding-bottom: 20rem;
			.head {
				display: flex;
				flex-direction: column;
				.left {
					width: 100%;
					box-sizing: border-box;
					padding: 20rem 20rem;
					display: flex;
					justify-content: space-between;
					.el-menu {
						height: 40rem;
						.li {
							height: 100%;
						}
						.link:last-child {
							padding: 0 6rem;
							line-height: 40rem;
						}
					}
					
				}
				.right {
					width: 100%;
					box-sizing: border-box;
					padding: 0 20rem;
					display: flex;
					justify-content: space-between;
					.login-btn {
						display: none;
					}
				}
			}
        }
    }
</style>
